import { Carousel } from 'antd-mobile';
import * as React from 'react';
import initalBack1 from '../../../static/images/initalBack1.png';
import initalBack2 from '../../../static/images/initalBack2.png';
import initalBack3 from '../../../static/images/initalBack3.png';

interface IProps {
    toHome: () => void;
}

export class Inital extends React.Component<IProps> {
    public state = {
        data: ['1', '2', '3'],
        imgHeight: screen.height,
    };
    componentDidMount() {
        // simulate img loading
        setTimeout(() => {
            this.setState({
                data: [initalBack1, initalBack2, initalBack3],
            });
        }, 100);
        console.log(window.innerHeight);
    }
    private toHome = (index: number) => {
        const loginNumber = this.state.data.length - 1;
        if (index === loginNumber) {
            this.props.toHome();
        }
    };
    render() {
        return (
            <Carousel
                autoplay={false}
                dots={false}
                beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                afterChange={(index) => console.log('slide to', index)}
                style={{ height: this.state.imgHeight }}
            >
                {this.state.data.map((val, index1) => (
                    <a onClick={() => this.toHome(index1)} key={val} style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}>
                        <img
                            src={val}
                            alt=""
                            style={{ width: '100%', height: this.state.imgHeight }}
                            onLoad={() => {
                                this.setState({ imgHeight: this.state.imgHeight });
                            }}
                        />
                    </a>
                ))}
            </Carousel>
        );
    }
}
